<template>
  <div class="card-item" >
    <div class="card-left">
      <div class="card-title nowrap">{{title}}</div>
      <div class="card-num nowrap">{{num}}</div>
      <div v-if="type !== 'ExpirationContract'" @click.stop="goMore()" class="show-more nowrap">查看更多>></div>
      <a-popover v-else trigger="click" placement="bottomLeft">
        <div class="show-more nowrap">查看详情>></div>
        <template #content>
          <a-table
            size="middle"
            :dataSource="data"
            :columns="columns"
            :rowKey="(r, i) => i"
            :pagination="false"
            :loading="tableLoading"
            :customRow="rowClick"
          >
            <template #bodyCell="{ text, record, index, column }">
              <template v-if="column.key === 'timeTypeTxt'">
                <span v-if="text">
                  {{ text }}
                  <span v-if="goUrlType.includes(record.timeType)">
                    >
                  </span>
                </span>
              </template>
            </template>
          </a-table>
        </template>
      </a-popover>
    </div>
    <div class="img-box">
      <img :src="icon"/>
    </div>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import {
  defineComponent,
  reactive,
  ref,
  computed,
  watch,
  toRaw,
  toRefs,
} from "vue";
import _ from "lodash";
export default defineComponent({
  name: "CardItem",
  components: {  },
  props: {
    title: {
      type: String,
      default: '',
    },
    num: {
      type: [Number, String],
      default: 0,
    },
    icon: {
      type: String,
      default: '',
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      type: String,
      default: '',
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableLoading: {
      type: Boolean,
      default: false,
    }
  },
  setup(props, {emit}) {

    const goUrlType = [ 'expired', 'divideRemind', 'expiredContinue', 'nearExpire'];
    const goMore = () => {
      emit('goMore')
    };

    const rowClick = (record, index) => {
      return {
        style: {
          cursor: goUrlType.includes(record.timeType)? "pointer" : "",
        },
        onClick: (event) => {
          let info = {};
          if (record.timeType == "expired") {
            info = {
              microId: `org_workbench_contractList_expired`,
              app: 'org',
              name: record.timeTypeTxt,
              url: `/contract/contractList?status=10`,
            }
          } else if (record.timeType == "divideRemind") {
            info = {
              microId: `org_workbench_contractList_divideRemind`,
              app: 'org',
              name: record.timeTypeTxt,
              url: `/contract/contractList?entry_status=1`,
            }
          } else if (record.timeType == "expiredContinue") {
            info =  {
              microId: `org_workbench_contractList_expiredContinue`,
              app: 'org',
              name: record.timeTypeTxt,
              url: `/contract/contractList?status=10&is_renewal=0`,
            }
          } else if (record.timeType == "nearExpire") {
            info =  {
              microId: `org_workbench_contractList_nearExpire`,
              app: 'org',
              name: record.timeTypeTxt,
              url: `/contract/contractList?status=2&order=lease_endtime&sort=asc`,
            }
          }
          if (_.isEmpty(info)) return;
          window.microApp.forceDispatch({
            type: "SetMicroPages",
            microInfo: info,
          })
        },
      };
    };


    return {
      goUrlType,
      goMore,
      rowClick,
    };
  },
});


</script>

<style lang="less" scoped>
@cardRadius: 4px;
@titleFontSize: 15px;
.nowrap {
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
}
.card-item {
  padding: 8px 12px;
  display: flex;
  background: linear-gradient(to right, rgba(38, 129, 243, .1), #fff);
  border-radius: @cardRadius;
  height: 120px;
  .card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
  }
  .card-title {
    font-size: @titleFontSize;
    font-weight: bold;
  }
  .card-num {
    font-size: 26px;
    font-weight: 600;
  }
  .img-box {
    width: 40px;
    img {
      width: 100%;
    }
  }
}
.show-more {
  color: @primary-color;
  cursor: pointer;
  font-size: 12px;
}
</style>
